<%@ page language="java" contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/include.inc.jsp" %>

<script src="${contextPath}/js/main.js" type="text/javascript"></script>

<script src="${contextPath}/js/DropDownList.js"></script>
<script>
    var page;
    var querying;
    $(function () {
        initDropDownList($("#search_EQ_sendStatus"), sendStatusArr);
        initDropDownList($("#search_EQ_masNum"), masNumArr);
        initDropDownList($("#search_EQ_captainStatus"), captainStatusArr);

        $(".date").on('focus',function(){
            WdatePicker();
        });

        $(".search").click(function () {
            page = undefined;
            $(".content-body").scrollTop(0);
            loadFlightPlan();
        }).trigger('click');

        $(".content-body").scroll(function () {
            var height = this.scrollHeight;
            var top = this.scrollTop;
            var clientHeight = this.clientHeight;
            if (height <= (top + clientHeight + 5) && height != clientHeight && !querying) {
                loadFlightPlan();
            }
        });

        $(".query-condition input").on('keypress', function () {
            if (event.keyCode == 13) {
                $(".search").trigger('click');
            };
        })
    });
    function initDropDownList(obj, arr) {
        var items = [];
        items.push({ItemText: "请选择", ItemData: '', Selected: true});
        $.each(arr, function (index, item) {
            if(index>1)return false;
            items.push({ItemText: item.text, ItemData: item.value});
        });
        $(obj).DropDownList({
            InputName: $(obj).attr("id"),
            ButtonText: "",
            onSelect: function (I, Data) {
                $("[name=" + I + "]").val(Data);
            },
            Items: items
        })
    }

    function loadFlightPlan() {
        var params = $("#searchFlpForm").serialize();

        if (page) {
            params += '&pageNum=' + (page.pageNum+1);
            if(page.pageNum == page.nextPage){
                return;
            }
        }
        $('.loading').show();
        if($(".content-body").scrollTop()>0){
            $(".content-body").scrollTop($(".content-body").scrollTop()+50);
        }
        querying = true;
        $.get('${contextPath}/query/flightPlan/load',params , function (data) {
            var tbody = $("#flight-table tbody");
            if (tbody.length == 0)return;

            if (!page) {
                tbody.empty();
            }
            $("#totalCount").text(data.page.totalCount);
            page = data.page;
            $.each(data.cptSends, function (index, item) {
                var tr = $("<tr></tr>");
                tr.append($("<td></td>").html(item.flightId));
                tr.append($("<td></td>").html(item.aircraftId));
                tr.append($("<td></td>").html(item.planId));
                tr.append($("<td></td>").html(item.dep));
                tr.append($("<td></td>").html(item.arr));
                var routeline = item.routeline;
                if (routeline.length > 20) {
                    routeline = item.routeline.substr(0, 20) + '...';
                }
                tr.append($("<td></td>").html(routeline).attr("title", item.routeline));
                var format = 'yyyy-MM-dd hh:mm';
                if (item.planDate) {
                    tr.append($("<td></td>").html(new Date(item.planDate).Format(format)));
                }
                if (item.sendDate) {
                    tr.append($("<td></td>").html(new Date(item.sendDate).Format(format)));
                } else {
                    tr.append($("<td></td>").html('&nbsp;'));
                }
                if (item.depDate != null && item.depDate != '') {
                    tr.append($("<td></td>").html(new Date(item.depDate).Format(format)));
                } else {
                    tr.append($("<td></td>").html('&nbsp;'));
                }

                var statusTxt = '', statusCss = '', status, statusArr;
                if (item.captainStatus != '0' && item.captainStatus != '') {
                    status = item.captainStatus;
                    statusArr = captainStatusArr;
                } else if (item.masNum && item.masNum != '') {
                    status = item.masNum;
                    statusArr = masNumArr;
                } else {
                    status = item.sendStatus;
                    statusArr = sendStatusArr;
                }
                for (var i = 0; i < statusArr.length; i++) {
                    if (status.endsWith(statusArr[i].value)) {
                        statusTxt = statusArr[i].text;
                        statusCss = statusArr[i].cls;
                        break;
                    }
                }

                var statusTd = $("<td></td>").addClass("status-td");
                var statusDiv = $("<div></div>").html(statusTxt).addClass(statusCss);
                statusTd.append(statusDiv);
                tr.append(statusTd);

                var sendPlan = $('<button class="btn btn-xs btn-primary">飞行计划</button>');
                sendPlan.click(function () {
                    $(".modal").modal('show');
                    $(".modal .modal-title").html('发送飞行计划');
                    $(".modal .modal-body").load('${contextPath }/common/showFlightPlan/' + item.id);
                });
                tr.append($("<td></td>").append(sendPlan));

                tbody.append(tr);
            });
            $("#curCount").text(tbody.find('tr').length);
            setTargetTableColumnWidth($("#flight-fix-head"), $("#flight-table"));

            querying = false;

            $('.loading').hide();
        }, 'json');
    }
</script>

<div class="container">
    <form id="searchFlpForm">
        <div class="query-condition">
            <table border="0">
                <tr>
                    <td width="100">
                        <label>机尾号：</label>
                    </td>
                    <td width="160">
                        <input type="text" class="form-control text-uppercase" name="search_LIKE_aircraftId" />
                    </td>
                    <td width="100">
                        <label>航班号：</label>
                    </td>
                    <td width="160">
                        <input type="text" class="form-control text-uppercase" name="search_LIKE_flightId"/>
                    </td>
                    <td width="110">
                        <label>生成起始时间：</label>
                    </td>
                    <td width="160">
                        <input type="text" name="search_GTE_planDate" class="date form-control" data-date-format="yyyy-mm-dd"/>
                    </td>
                    <td width="110">
                        <label>生成结束时间：</label>
                    </td>
                    <td width="160">
                        <input type="text" name="search_LTE_planDate" class="date form-control" data-date-format="yyyy-mm-dd"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>发送状态：</label>
                    </td>
                    <td>
                        <div class="dropdownlist" id="search_EQ_sendStatus">
                        </div>
                    </td>
                    <td>
                        <label>航班计划编号：</label>
                    </td>
                    <td>
                        <input type="text" name="search_LIKE_planId" class="form-control"/>
                    </td>

                    <td>
                        <label>发送起始时间：</label>
                    </td>
                    <td>
                        <input type="text"
                               name="search_GTE_sendDate"
                               class="date form-control"
                               data-date-format="yyyy-mm-dd"/>
                    </td>
                    <td>
                        <label>发送结束时间：</label>
                    </td>
                    <td>
                        <input type="text"
                               name="search_LTE_sendDate"
                               class="date form-control"
                               data-date-format="yyyy-mm-dd"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>MAS接收状态：</label>
                    </td>
                    <td>
                        <div class="dropdownlist" id="search_EQ_masNum">
                        </div>
                    </td>
                    <td>
                        <label>FMC接收状态：</label>
                    </td>
                    <td>
                        <div class="dropdownlist" id="search_EQ_captainStatus">
                        </div>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                        <div class="pull-right">
                            <button class="btn btn-primary search" type="button">查询</button>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <div class="main-body-center" style="width: 100%">
        <div class="panel-title">
            <b>飞行计划</b>
            <label class="gray">&nbsp;|&nbsp;</label>
            <span id="curCount" class="green">0</span>
            <span class="gray">/</span>
            <span id="totalCount" class="gray">0</span>
        </div>
        <table id="flight-fix-head" class="table-bordered-simple fix-head">
            <thead>
            <tr>
                <th width="60">航班号</th>
                <th width="60">机尾号</th>
                <th width="90">航班计划编号</th>
                <th width="65">起飞机场</th>
                <th width="65">降落机场</th>
                <th width="190">航路方向信息</th>
                <th width="105">生成时间</th>
                <th width="105">发送时间</th>
                <th width="105">预计起飞时间</th>
                <th width="100">飞行计划状态</th>
                <th width="auto" style="min-width: 60px">操作</th>
            </tr>
            </thead>
        </table>

        <div class="content-body">
            <table id="flight-table" class="table-bordered-simple table-script">
                <tbody>
                </tbody>
            </table>
            <div class="loading">loading...</div>
        </div>
    </div>
</div>